<template>
  <div>
    <!--  -->
    <div v-if="!isHaveVideo">
      <div v-if="errMsg">
        {{ errMsg }}
      </div>
      <div v-else>
        <loading />
      </div>
    </div>
    <div v-else>
      <vueSeamless :data="serviceDays" :class-option="optionCustomer" class="seamless-warp3">
        <span slot="left-switch" class="left-arrow" />
        <span slot="right-switch" class="right-arrow" />
        <ul :style="'width:' + ulWidth + 'px'" class="item">
          <li v-for="(item, key) in serviceDayObj" :key="key" :class="key == curDay ? 'check-color' : ''" @click="selectVideo(key)">{{ item }}</li>
        </ul>
      </vueSeamless>
      <el-divider />
      <div class="recipe-body">
        <div v-for="(item, index) in currentDayInfo" :key="index" class="videolist">
          <div class="videoname">
            {{ index + 1 }}: {{ item.name }}
          </div>
          <div class="videocontent">
            <video :src="item.url" controls="controls" class="shipin-video" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'
import loading from '@/views/components/loading'

export default {
  components: {
    loading, vueSeamless
  },
  data() {
    return {
      isHaveVideo: false,
      errMsg: '',
      serviceDays: [],
      ulWidth: 0,
      serviceDayObj: {},
      curDay: '',
      currentDayInfo: []
    }
  },
  computed: {
    optionCustomer() {
      return {
        step: 100,
        autoPlay: false,
        navigation: true,
        direction: 2,
        switchSingleStep: 700,
        limitMoveNum: 2,
        switchOffset: 20,
        switchDisabledClass: 'disabled',
        switchDelay: 10
      }
    }
  },
  methods: {
    initData(serviceId, isCustom, dayIndex) {
      this.isHaveVideo = false
      this.curDay = 'day' + dayIndex
      this.$api.order.service
        .orderVideo(serviceId)
        .then(res => {
          this.videoList = res.data.video
          this.currentDayInfo = this.videoList[this.curDay]
          //处理滚动的值
          this.serviceDays = Object.keys(this.videoList)
          for (const i in this.serviceDays) {
            this.serviceDayObj[this.serviceDays[i]] = '第 ' + (+i + 1) + ' 天'
          }
          this.ulWidth = 100 * this.serviceDays.length
          this.isHaveVideo = true
        }).catch(err => {
          this.isHaveVideo = false
          console.log(err)
          this.errMsg = err.data.message
        })
    },
    selectVideo(key) {
      this.curDay = key
      this.currentDayInfo = this.videoList[key]
    }
  }
}
</script>

<style lang="scss" scoped>
.seamless-warp3 {
  overflow: hidden;
  height: 55px;
  width: 700px;
  margin-left: 70px;
  .left-arrow, .right-arrow {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #00a0e9;
    cursor: pointer;
    &:hover {
      background-color: #0f39fa;
    }
    &::before {
      position: absolute;
      content: '';
      width: 12px;
      height: 12px;
      top: 9px;
      left: 12px;
      border: 2px solid #fff;
    }
  }
  .left-arrow::before {
    border-right: 0;
    border-bottom: 0;
    transform: rotate(-45deg);
  }
  .right-arrow::before {
    border-left: 0;
    border-top: 0;
    left: 9px;
    transform: rotate(-45deg);
  }
  ul.item {
    list-style: none!important;
    margin: 0;
    padding: 0;
    li {
      float: left;
      width: 90px;
      height: 30px;
      margin: 10px 5px 5px;
      line-height: 30px;
      // background-color: #999;
      background-color: #999;
      color: #fff;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
    }
    li.check-color {
      background-color: #00a0e9;
    }
  }
}
</style>

<style scoped>
.videoname {
  font-size: 15px;
  padding: 20px 0;
  font-weight: 700;
}
</style>
